<template>
  <div class="content">
    <el-drawer title="仓位快速绑定商品" :visible.sync="drawer" direction="rtl" class="goodsDarwer" size="50%" :wrapper-closable="false">
      <div class="dis-flex flex-wrap flex-y-center">
        <el-tag v-for="(item, index) in position_sn" :key="index" class="ml-10" type="info" size="small">{{ item }}</el-tag>
        <el-input v-model="seach.sku_code" class="sku ml-10" placeholder="商品编码" size="small" clearable />
        <el-button type="primary" icon="el-icon-search" class="ml-10" size="small" @click="searchBox('search')">搜索</el-button>
        <el-button icon="el-icon-refresh-left" size="small" @click="searchBox('reset')">重置</el-button>
      </div>
      <el-table ref="table" :data="list.data" class="table" :max-height="minHeight" size="small" row-key="sku_code" @selection-change="selectionChange">
        <el-table-column type="selection" width="30" :reserve-selection="true" />
        <el-table-column label="图片" min-width="80">
          <template slot-scope="scope">
            <el-image v-viewer :src="scope.row.imgurl" />
          </template>
        </el-table-column>
        <el-table-column label="产品名称" min-width="400" prop="name" />
        <el-table-column label="产品sku编码" min-width="150" prop="sku_code" />
        <el-table-column label="颜色" min-width="70" prop="color_name" />
        <el-table-column label="规格" min-width="60" prop="spec_value" />
      </el-table>
      <div ref="paginations" class="drawer-btn">
        <Pagination ref="pagination" class="flex-x-start" />
        <div class="dis-flex flex-y-center flex-x-between">
          <el-link type="primary" :underline="false" @click="purchase">解除绑定</el-link>
          <div>
            <el-button size="small" @click="drawer = false">取 消</el-button>
            <el-button type="primary" size="small" @click="purchase">确定</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { StoragePosition } from '@/api/storage/storagePosition'
import { getMinH } from '@/utils/public'
import Pagination from '@/components/Pagination'
export default {
  name: 'Goods',
  components: {
    Pagination
  },
  data() {
    return {
      drawer: false,
      seach: {},
      pagination: {
        page: 1,
        per_page: 30
      },
      list: {
        data: []
      },
      position_sn: [],
      selectId: [],
      minHeight: 0,
      id: []
    }
  },
  methods: {
    async show(data = {}) {
      // 初始化数据
      Object.assign(this.$data, this.$options.data())
      this.$set(this.seach, 'sku_code', data.sku_code ? data.sku_code : '')
      this.drawer = true
      await this.getGoodsSKU()

      this.position_sn = data.position_sn
      this.id = data.id
      this.$nextTick(() => {
        this.minHeight = getMinH(this, 'table', 'paginations')
        // 清除选中项
        this.$refs.table.clearSelection()
        // 默认选中
        this.list.data.forEach(row => {
          const selectId = this.seach.sku_code.split(',')
          if (selectId.indexOf(row.sku_code) >= 0) {
            this.$refs.table.toggleRowSelection(row, true)
          }
        })
      })
    },
    // 搜索
    searchBox(val) {
      this.pagination.page = 1
      if (val === 'reset') {
        this.seach = {}
      }
      this.getGoodsSKU()
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.sku_code)
    },
    async getGoodsSKU() {
      await StoragePosition.pageSku({ ...this.pagination, ...this.seach }).then((res) => {
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getGoodsSKU()
      }
      })
    },
    // 确定
    purchase() {
      const param = {
        sku_codes: this.selectId.join(','),
        id: this.id.join(',')
      }
      StoragePosition.addStoragePosition(param).then((res) => {
        this.$message.success('设置成功')
        this.drawer = false
        this.$emit('getList')
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep :focus {
  outline: 0;
}
.goodsDarwer{
  ::v-deep .el-drawer__header{
  margin-bottom: 10px;
  padding: 15px;
  border-bottom: 1px solid #F0F0F0;
  font-weight: 600;
  }
  .sku{
    width: 300px;
  }
  .ml-10{
    margin-left: 10px;
  }
  .table{
    width: 100%;
    margin-top: 10px;
  }
}
//   抽屉
  .content{
   ::v-deep .el-drawer__wrapper{
      position: absolute;
      top: 0;
    }
  }
  .drawer-btn{
    margin:0 20px;
    .flex-x-start{
      justify-content: flex-start;
    }
  }
</style>
